<!--
  功能：功能描述
  作者：Sjf
  时间：2022年02月24日 14:17:40
  版本：v1.0
  修改时间：
-->
<template>
  <!-- 头部盒子 -->
  <div class="header">
    <!-- 标题区域 -->
    <div class="lnner-header">
      <div>
        <h1>全栈系统实践-注册</h1>
        <a-form
          id="components-form-demo-normal-login"
          :label-col="labelCol"
          :wrapper-col="wrapperCol"
          :form="form"
          class="login-form"
          @submit="handleSubmit"
        >
          <a-form-item label="邮箱">
            <a-input
              v-decorator="[
                'email',
                {rules: [
                    { required: true, message: '请输入邮箱!' },
                    { type: 'email', message: '邮箱格式有误!' },
                    {validator:this.EmailValidator}
                  ] 
                },
              ]"
              placeholder="请输入邮箱"
            >
              <a-icon slot="prefix" type="mail" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="用户名">
            <a-input
              v-decorator="[
                'username',
                {rules: [
                    { required: true, message: '请输入用户名!' },
                  ] 
                },
              ]"
              placeholder="请输入用户名"
            >
              <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="联系方式">
            <a-input
              v-decorator="[
                'phone',
                {rules: [
                    { required: true, message: '请输入联系方式!' },
                    {validator:this.MobileNumberValidator}
                  ] 
                },
              ]"
              placeholder="请输入联系方式"
            >
              <a-icon slot="prefix" type="phone" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="职称">
            <a-input
              v-decorator="[
                'job',
                {rules: [
                    { required: true, message: '请输入职称!' },
                  ] 
                },
              ]"
              placeholder="请输入职称"
            >
              <a-icon slot="prefix" type="solution" style="color: rgba(0,0,0,.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="密码">
            <a-input-password
              v-decorator="[
                'password',
                { 
                  rules: [
                    { required: true, message: '请输入密码!' },
                    { min: 5, max: 12, message: '密码最少5位，最多12位', trigger: 'blur' },
                    {validator: this.validateToNextPassword}
                  ] 
                },
              ]"
              type="password"
              placeholder="请输入密码"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input-password>
          </a-form-item>
          <a-form-item label="确认密码">
            <a-input-password
              v-decorator="[
                'password2',
                { rules: [
                    { required: true, message: '请再次输入密码!' },
                    { validator: this.compareToFirstPassword}
                  ] 
                },
              ]"
              type="password"
              placeholder="请输入确认密码"
              @blur="handleConfirmBlur"
            >
              <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" html-type="submit" class="login-form-button">注册</a-button>
            <a class="login-form-register" @click="goLogin">已有账号，立即登录!</a>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <!-- 波浪区域 -->
    <div>
      <!-- svg形状 -->
      <svg class="waves" viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
        <!-- 形状容器 -->
        <defs>
          <path
            id="gentle-wave"
            d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
          />
        </defs>
        <!-- 组合形状 -->
        <g class="parallax">
          <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
          <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
          <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
          <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
        </g>
      </svg>
    </div>
  </div>
</template>

<script>
import { login, register } from '@/network/loginAndRegister.js'
export default {
  // 组件名称
  name: 'login',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 局部注册的组件
  components: {},
  // 组件状态值
  data () {
    return {
      confirmDirty: false,
      labelCol: {
        span: 6
      },
      wrapperCol: {
        span: 18
      },
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    handleSubmit (e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          const userInfo = {
            username: values.username,
            email: values.email,
            phone: values.phone,
            password: values.password,
            job: values.job
          }
          register(userInfo).then(res => {
            this.$message.success('注册成功')
            this.$router.push('/login')
          })
        }
      });
    },
    goLogin () {
      this.$router.push('/login')
    },
    handleConfirmBlur (e) {
      const value = e.target.value;
      this.confirmDirty = this.confirmDirty || !!value;
    },
    //密码验证
    compareToFirstPassword (rule, value, callback) {
      const form = this.form;
      const firstPassword = form.getFieldValue('password')
      if (firstPassword == undefined) {
        callback('请输入首次密码!');
      }
      if (value && value !== firstPassword) {
        callback('您输入的两次密码不一致!');
      } else {
        callback();
      }
    },
    validateToNextPassword (rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(['password2'], { force: true });
      }
      callback();
    },
    // 手机号验证
    MobileNumberValidator (rule, value, callback) {
      const idcardReg = /^1(3|4|5|6|7|8|9)\d{9}$/
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
      callback()
    },
    // 邮箱验证
    EmailValidator (rule, value, callback) {
      const idcardReg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
      if (!idcardReg.test(value)) {
        // eslint-disable-next-line standard/no-callback-literal
        callback('非法格式')
      }
      // Note: 必须总是返回一个 callback，否则 validateFieldsAndScroll 无法响应
      callback()
    },
  },
  // 以下是生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 在实例初始化之后，组件属性计算之前，如data属性等
  */
  beforeCreate () {
    this.form = this.$form.createForm(this, { name: 'normal_login' });
  },
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
  },
  /**
  * 在挂载开始之前被调用：相关的 render 函数首次被调用。
  */
  beforeMount () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
  * 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
  */
  beforeUpdate () {
  },
  /**
  * 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
  * 当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
  */
  updated () {
  },
  /**
  * keep-alive 组件激活时调用。 仅针对keep-alive 组件有效
  */
  activated () {
  },
  /**
  * keep-alive 组件停用时调用。 仅针对keep-alive 组件有效
  */
  deactivated () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script> 

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped lang="less">
.header {
  position: relative;
  // text-align: center;
  /* 背景渐变 */
  background: linear-gradient(
    60deg,
    rgba(84, 58, 183, 1) 0%,
    rgba(0, 172, 193, 1) 100%
  );
  color: wheat;
  .lnner-header {
    height: 80vh;
    width: 100%;
    /* flex */
    /* 垂直居中 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    h1 {
      font-family: "Lato", "sans-serif";
      font-weight: 300;
      /* font-spacing:2px; */
      font-size: 48px;
    }
    h2 {
      font-family: "Lato", "sans-serif";
      font-weight: 300;
      /* font-spacing:2px; */
      font-size: 28px;
    }
    .login-form {
      width: 400px;
      padding: 30px;
      padding-bottom: 0;
      background-color: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      box-shadow: 0 0 15px #fff;
    }
  }
  .waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    /* 最小值 */
    min-height: 100px;
    /* 最大值 */
    max-height: 150px;
    .parallax > use {
      animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
    }
    /* 选择的一个use */
    .parallax > use:nth-child(1) {
      /* 延迟 2s 执行 */
      animation-delay: -2s;
      /* 7s 内 执行完毕 */
      animation-duration: 7s;
    }
    .parallax > use:nth-child(2) {
      animation-delay: -3s;
      animation-duration: 10s;
    }
    .parallax > use:nth-child(3) {
      animation-delay: -4s;
      animation-duration: 13s;
    }
    .parallax > use:nth-child(4) {
      animation-delay: -5s;
      animation-duration: 20s;
    }
  }
}
/* 动画 */
@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}
/* 当屏幕小于 768px 执行 */
@media (max-width: 768px) {
  .waves {
    height: 40px;
    min-height: 40px;
  }
  h1 {
    font-size: 24px;
  }
}

#components-form-demo-normal-login .login-form {
  max-width: 300px;
}
#components-form-demo-normal-login .login-form-forgot {
  float: right;
  color: #1da57a;
}
.login-form-register {
  float: right;
  color: #1da57a;
}
#components-form-demo-normal-login .login-form-forgot:hover,
.login-form-register:hover {
  color: #2ee0a5;
}
#components-form-demo-normal-login .login-form-button {
  width: 100%;
  margin-left: 85px;
}

//修改input的背景颜色
::v-deep .ant-input {
  background-color: transparent;
}

::v-deep .ant-form-item-label > label {
  color: #fff;
}
</style>
